<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

// 菜单选中
const handleSelect = (key: string, keyPath: string[]) => {
    router.push('/healthManagement?type=' + key)
}
</script>

<template>
    <el-menu default-active="0" class="el-menu-demo" mode="horizontal" background-color="#f7f7f7"
        hover-background-color="#000" text-color="#333" active-text-color="#fff" @select="handleSelect">
        <el-menu-item index="0" style="font-weight: 800;">全部分类</el-menu-item>
        <el-menu-item index="1">身体健康</el-menu-item>
        <el-menu-item index="2">饮食健康</el-menu-item>
        <el-menu-item index="3">心理健康</el-menu-item>
    </el-menu>
</template>

<style scoped lang="scss">
.el-menu {
    display: flex;
    width: 80vw;
    height: 8vh;
    margin: 0 auto;
    border: none;
    box-shadow: 0.2vw 0.2vw 0.2vw #ccc;

    .el-menu-item {
        display: flex;
        font-size: 1vw;
        height: 8vh;
        padding: 1.5vw !important;
        border-right: 0.2vw solid #fff;
    }

    .is-active {
        color: #fff;
        background-color: #45c998 !important;
        border: none;
    }

    .el-menu-item:hover {
        color: #fff;
        background-color: #45c998;
    }
}
</style>